{% extends 'base.html' %}

{% block body %}

 <!-- 添加账单模态框 -->
 <div class="modal fade" id="AddBillModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addModalLabel">添加账单</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="AddBillForm">
            {% include 'billForm.html' %}
            <div style="padding: 50px;">
              <button type="button" class="btn btn-default" data-dismiss="modal" style="float: left">返回</button>
              <button type="button" class="btn btn-success" id="submitBill" style="float: right">添加</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

<!--删除模态框-->
<div class="modal fade" id="billDeleteModal" tabindex="-1" role="dialog" aria-labelledby="billDeleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="billDeleteModalLabel">是否删除</h4>
      </div>
      <div class="modal-body">
        <p>你确定要删除该账单吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
        <button type="button" id="billDeleteButton" class="btn btn-danger">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

<!--修改账单模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">账单完成</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="bill-status" class="control-label">支付状态:</label>
            <select class="form-control" id="bill-status" name="bill-status">
              <option value="0">未支付</option>
              <option value="1">已支付</option>
            </select>
          </div>
          <div class="form-group">
            <label >还款时间</label>
            <input type="date" class="form-control" id="payment-date" placeholder="还款时间" name = "payment_date">
          </div>
          <input type="hidden" id="bill-id" name="id">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id = "save-button">保存</button>
      </div>
    </div>
  </div>
</div>

<table class="table table-hover" id="billTable">
    <thead>
    <tr>
        <th>账单ID</th>
        <th>备注名</th>
        <th>下欠时间</th>
        <th>货物品类</th>
        <th>出货量</th>
        <th>单价</th>
        <th>下欠总额</th>
        <th>账单状态</th>
        <th>还款时间</th>
    </tr>
    </thead>
    <tbody id="billListBody">
        {% for bill in bill_list %}
    <tr>
        <td>{{ bill.id }}</td>
        <td>{{ bill.remark }}</td>
        <td>{{ bill.debt_date }}</td>
        <td>{{ bill.goods }}</td>
        <td>{{ bill.cargo_quantity }}</td>
        <td>{{ bill.price }}元</td>
        <td>{{ bill.total_arrears }}元</td>
        {% if bill.bill_status == 1 %}
        <td><span class = "label label-{{bill_status_dict[bill.bill_status].cls}}">{{bill_status_dict[bill.bill_status].text}}</span></td>
        <td>{{ bill.payment_date }}</td>
        {% endif %}
        {% if bill.bill_status == 0 %}
        <td><button class="btn btn-{{bill_status_dict[bill.bill_status].cls}}" type="button" data-toggle="modal" data-target="#exampleModal" data-upbill="{{bill.id}}">{{bill_status_dict[bill.bill_status].text}}</button></td>
        <td></td>
        {% endif %}

        {% if get_user_role() == 2 %}
        <td style="text-align: right;"><button class="btn btn-warning delete-button" type="button"  data-billid="{{ bill.id }}"><span class="glyphicon glyphicon-remove" aria-hidden="true">删除账单</span></button></td>
        {% endif %}
    </tr>
        {% endfor %}
    </tbody>

    {% if get_user_role() == 2 %}
    <button class="btn btn-info " type="submit" data-toggle="modal" data-target="#AddBillModal" ><span class="glyphicon glyphicon-plus-sign" aria-hidden="true">添加账单</span></button>
    {% endif %}
</table>
{% endblock %}

